<template>
  <div class="personal">
    <div class="header">
      <div class="setting">
        <van-icon
          name="todo-list-o"
          style="position: absolute; right: 45px"
          size="20"
        ></van-icon>
        <van-icon
          name="setting-o"
          style="position: absolute; right: 20px"
          size="20"
        ></van-icon>
      </div>

      <!--  -->
      <div class="profile">
        <router-link :to="'/editProfile/' + obj.id">
          <van-image
            round
            width="50"
            height="50"
            :src="obj.head_img"
          />
        </router-link>
        <div class="name">
          <span> {{ obj.nickname }}</span>
          <span> {{ obj.status }}<van-icon name="edit" /></span>
        </div>
      </div>
    </div>
    <div class="forms">
      <router-link to="/collect">
        <mycell title="我的收藏" content="文章">
          <van-icon
            name="like-o"
            slot="left"
            size="20"
            color="#f15830"
          ></van-icon>
          <van-badge  slot="right" />
        </mycell>
      </router-link>
      <router-link to="/collect">
        <mycell title="我的答题" content="历史">
          <van-icon
            name="comment-o"
            slot="left"
            size="20"
            color="#03abd9"
          ></van-icon>
          <van-badge :content="obj.post_star" slot="right" /> </mycell
      ></router-link>
      <router-link to="/collect">
        <mycell title="积分商城">
          <van-icon
            name="cart-o"
            slot="left"
            size="20"
            color="#eec027"
          ></van-icon> </mycell
      ></router-link>
      <router-link to="/collect">
        <mycell title="关于我们">
          <van-icon
            name="phone-o"
            slot="left"
            size="20"
            color="#97ee27"
          ></van-icon> </mycell
      ></router-link>
    </div>
    <div style="text-align: center">
      <van-button
        @click="back"
        type="warning"
        size="large"
        text="退出登录"
        plain
        square
      ></van-button>
    </div>
  </div>
</template>

<script>
import mycell from "@/components/cell.vue";
import myheader from "@/components/header.vue";
import axios from "@/utils/myaxios.js";
export default {
  props: ["title"],
  components: {
    mycell,
    myheader,
  },
  data() {
    return {
      id: -1,
      obj: {
        gender: 1,
        nickname: "李白",
        status: "气血不足",
        head_img: "https://img01.yzcdn.cn/vant/logo.png",
      },
      keeps: 0,
    };
  },
  filters: {
    dateformat(xx) {
      return "";
    },
  },
  methods: {
    async getUserByid(id) {
      return await this.$http.get("/user/" + id);
    },

    back() {
      this.$router.push({ name: "index" });
      localStorage.removeItem("user");
      localStorage.removeItem("other");
    },
  },
  mounted() {
    this.id = this.$route.params.id;
    this.getUserByid(this.id).then((res) => {
      this.obj=res.data.result
    });
  },
 
};
</script>

<style lang="less" scoped>
.personal {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
}
.setting {
  padding-top: 30px;
}

a {
  color: #666;
}
.header {
  height: 36%;
  width: 100%;
  background: url("../assets/bgc.png") no-repeat;
}
.profile {
  padding: 43px 35px;
  display: flex;
  .name {
    font-size: 14px;
    color: #fff;
    padding: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
}
.forms {
  margin-bottom: 20px;
}
.logos {
  padding-right: -10px;
}
van-button {
  color: #000;
}
</style>